<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>人力资源管理系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="backstageCSSandJS/css/font.css">
    <link rel="stylesheet" href="backstageCSSandJS/css/xadmin.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/Swiper/3.4.2/css/swiper.min.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/Swiper/3.4.2/js/swiper.jquery.min.js"></script>
    <script src="backstageCSSandJS/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="backstageCSSandJS/js/xadmin.js"></script>

</head>
<body>
    <!-- 顶部开始 -->
    <div class="container">
        <div class="logo"><a href="ns.do?op1=zhexiandenglu">JCP人事管理系统</a></div>
        <div class="open-nav"><i class="iconfont">&#xe699;</i></div>
        <ul class="layui-nav right" lay-filter="">
          <li class="layui-nav-item">
            <a href="javascript:;">admin</a>
            <dl class="layui-nav-child"> <!-- 二级菜单 -->
             <dd><a href="login.jsp">切换帐号</a></dd>
              <dd><a href="login.jsp">退出</a></dd>
            </dl>
          </li>
          
        </ul>
    </div>
    <!-- 顶部结束 -->
    <!-- 中部开始 -->
    <<div class="wrapper">
        <!-- 左侧菜单开始 -->
        <div class="left-nav">
          <div id="side-nav">
            <ul id="nav">
                <li class="list" current>
                    <a href="javascript:;">
                        <i class="iconfont">&#xe761;</i>
                        公告管理
                        <i class="iconfont nav_right">&#xe697;</i>
                    </a>
                    <ul class="sub-menu">
                        <li>
                            <a href="ns.do?op1=login">
                                <i class="iconfont">&#xe6a7;</i>
                                	公告列表
                            </a>
                            
                        </li>
                    </ul>
                </li>
                <li class="list">
                    <a href="javascript:;">
                        <i class="iconfont">&#xe70b;</i>
                        员工管理
                        <i class="iconfont nav_right">&#xe697;</i>
                    </a>
                    <ul class="sub-menu">
                        <li>
                            <a href="ns.do?op1=Usersel">
                                <i class="iconfont">&#xe6a7;</i>
                                	员工列表
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="list" >
                    <a href="javascript:;">
                        <i class="iconfont">&#xe6a3;</i>
                        岗位管理
                        <i class="iconfont nav_right">&#xe697;</i>
                    </a>
                    <ul class="sub-menu">
                        <li>
                            <a href="ns.do?op1=postSel">
                                <i class="iconfont">&#xe6a7;</i>
                             	  岗位列表
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="list" >
                    <a href="javascript:;">
                        <i class="iconfont">&#xe6a3;</i>
                        部门管理
                        <i class="iconfont nav_right">&#xe697;</i>
                    </a>
                    <ul class="sub-menu" style="display:none">
                        <li>
                            <a href="ns.do?op1=deptsel">
                                <i class="iconfont">&#xe6a7;</i>
                         	      部门列表
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="list" >
                    <a href="javascript:;">
                        <i class="iconfont">&#xe6a3;</i>
                        档案管理
                        <i class="iconfont nav_right">&#xe697;</i>
                    </a>
                    <ul class="sub-menu" style="display:none">
                        <!-- <li>
                            <a href="files_1.jsp">
                                <i class="iconfont">&#xe6a7;</i>
                          	      添加档案
                            </a>
                        </li> -->
                        <li>
                            <a href="ns.do?op1=filesminsel">
                                <i class="iconfont">&#xe6a7;</i>
                          	      查看档案
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="list" >
                    <a href="javascript:;">
                        <i class="iconfont">&#xe6a3;</i>
                        考勤管理
                        <i class="iconfont nav_right">&#xe697;</i>
                    </a>
                    <ul class="sub-menu" style="display:none">
                        <li>
                            <a href="ns.do?op1=zhousel">
                                <i class="iconfont">&#xe6a7;</i>
                           	     考勤统计图
                            </a>
                        </li>

                    </ul>
                </li>

            </ul>
          </div>
        </div>
        <!-- 左侧菜单结束 -->
        <!-- 右侧主体开始 -->
        <div class="page-content">
          <div class="content">
            <!-- 右侧内容框架，更改从这里开始 -->
            <blockquote class="layui-elem-quote">
                特别声明：ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。如需使用，详细了解可以访问官网 <a href="http://echarts.baidu.com/" style="color:red">ECharts</a>。 x-admin不承担任何版权问题。
            </blockquote>
            <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
            <div id="main" style="width: 100%;height:400px;"></div>
            <blockquote class="layui-elem-quote">
                注意：本案例的Echarts图表库由cdn引入，需要在线才能正常使用，如想离想，请至Echarts官网下载。
            </blockquote>
            <!-- 右侧内容框架，更改从这里结束 -->
          </div>
        </div>
        <!-- 右侧主体结束 -->
    </div>
    <!-- 中部结束 -->
    <!-- 底部开始 -->
     <div class="footer">
        <div class="copyright">Copyright ©2019 人事管理系统 v3.3 All Rights Reserved. 本后台系统由JCP小队提供技术支持</div>  
    </div>
    <!-- 底部结束 -->
    <!-- 背景切换开始 -->
    <div class="bg-changer">
        <div class="swiper-container changer-list">
            <div class="swiper-wrapper">
                  <div class="swiper-slide"><img class="item" src="backstageCSSandJS/images/a.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="backstageCSSandJS/images/b.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="backstageCSSandJS/images/c.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="backstageCSSandJS/images/d.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="backstageCSSandJS/images/e.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="backstageCSSandJS/images/f.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="backstageCSSandJS/images/g.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="backstageCSSandJS/images/h.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="backstageCSSandJS/images/i.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="backstageCSSandJS/images/j.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="backstageCSSandJS/images/k.jpg" alt=""></div>
                <div class="swiper-slide"><span class="reset">初始化</span></div>
            </div>
        </div>
        <div class="bg-out"></div>
        <div id="changer-set"><i class="iconfont">&#xe696;</i></div>   
    </div>
    <!-- 背景切换结束 -->
        
        <script src="http://cdn.bootcss.com/echarts/3.3.2/echarts.min.js" charset="utf-8"></script>
        <script type="text/javascript" src="backstageCSSandJS/js/echarts-for-x-admin.js"></script>

        <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'),'echarts-for-x-admin');

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '周周考勤表'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data:['请假人数','早退人数','迟到人数','加班人数','搜索引擎']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['周一','周二','周三','周四','周五']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name:'迟到人数',
                    type:'line',
                    stack: '总量',
                    data:[${requestScope.list1.get(0)}, ${requestScope.list1.get(1)}, ${requestScope.list1.get(2)}, ${requestScope.list1.get(3)}, ${requestScope.list1.get(4)}]
                },
                {
                    name:'早退人数',
                    type:'line',
                    stack: '总量',
                    data:[${requestScope.list2.get(0)}, ${requestScope.list2.get(1)}, ${requestScope.list2.get(2)}, ${requestScope.list2.get(3)}, ${requestScope.list2.get(4)}]
                },
                {
                    name:'加班人数',
                    type:'line',
                    stack: '总量',
                    data:[${requestScope.list3.get(0)}, ${requestScope.list3.get(1)}, ${requestScope.list3.get(2)}, ${requestScope.list3.get(3)}, ${requestScope.list3.get(4)}]
                },
                {
                    name:'加班时长',
                    type:'line',
                    stack: '总量',
                    data:[${requestScope.list4.get(0)}, ${requestScope.list4.get(0)}, ${requestScope.list4.get(0)}, ${requestScope.list4.get(0)}, ${requestScope.list4.get(0)}]
                },
                {
                    name:'搜索引擎',
                    type:'line',
                    stack: '总量',
                    data:[${requestScope.list1.get(0)}+${requestScope.list1.get(1)}+${requestScope.list1.get(2)}+${requestScope.list1.get(3)}+${requestScope.list1.get(4)}, 
                    	${requestScope.list2.get(0)}+${requestScope.list2.get(1)}+${requestScope.list2.get(2)}+${requestScope.list2.get(3)}+${requestScope.list2.get(4)},
                    	${requestScope.list3.get(0)}+${requestScope.list3.get(1)}+${requestScope.list3.get(2)}+${requestScope.list3.get(3)}, ${requestScope.list3.get(4)}, 
                    	${requestScope.list4.get(0)}+${requestScope.list4.get(0)}+${requestScope.list4.get(0)}+${requestScope.list4.get(0)}+${requestScope.list4.get(0)},
                    	]
                }
            ]
        };


        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>